<script setup lang="ts">
// 有行号的文本域
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '输入后自动解析',
  }
});
const emit = defineEmits([
  "update:value",
]);
const lineCount = ref(1);
const handleInput = (e: any) => {
  const value = e.target.value;
  const lines = value.split('\n');
  lineCount.value = lines.length;
  emit('update:value', value);
};
watch(() => props.value, (v) => {
  const lines = v.split('\n');
  lineCount.value = lines.length;
})
</script>

<template>
  <a-row class="line-textarea" type="flex">
    <a-col>
      <div class="line-numbers">
        <div v-for="i in lineCount" :key="i">{{ i }}</div>
      </div>
    </a-col>
    <a-col flex="1">
      <textarea :placeholder="placeholder" :value="value" @input="handleInput" :rows="lineCount"
                style="resize: none;border: 0;width: 100%;height: 100%;"
      />
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.line-textarea {
  position: relative;
  border: 1px solid #eee;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .line-numbers {
    padding: 5px 10px;
    background: #f0f0f0;
    color: #666;
    font-size: 12px;
    line-height: 22px;
    height: 100%;
    overflow-y: auto;
  }

  textarea {
    font-size: 14px;
    padding: 5px 10px;
    line-height: 22px;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
